<template>
	<view class="beijing1" v-if="Object.keys(shujv).length > 0">
		<view class="" style="position: fixed; top: 0">
			<image src="/static/beitu.png" mode="" style="width: 100vw; height: 100vh"></image>
		</view>
		<view class="" style="position: fixed; bottom: 0; right: 0">
			<image src="/static/zhang.png" mode="" style="width: 374rpx; height: 640rpx"></image>
		</view>
		<u-navbar :placeholder="true" title="宴席订单详情" @rightClick="rightClick" :autoBack="true" bg-color="transparent"></u-navbar>
		<view class="beijing" style="position: relative">
			<view class="" style="background: #ffffff; border-radius: 10rpx; padding: 25rpx 30rpx">
				<view class="flex1">
					<image :src="img + shujv.category.image" mode="" style="width: 130rpx; height: 130rpx; border-radius: 10rpx"></image>
					<view class="column between1" style="margin-left: 23rpx">
						<text style="font-weight: 400; font-size: 28rpx; color: #11130b">{{ shujv.category.title }}</text>
						<text style="font-weight: 400; font-size: 24rpx; color: #8c1608">开宴时间：{{ shujv.time_str.substring(0,10) + ' ' + shujv.category.time_str }}</text>
					</view>
				</view>
			</view>
			<view class="" style="background: #ffffff; border-radius: 10rpx; padding: 25rpx 30rpx; margin-top: 20rpx">
				<view class="" style="font-weight: 400; font-size: 30rpx; color: #000000">宴席信息</view>
				<view class="" style="font-weight: 400; font-size: 26rpx; color: #888888; margin-top: 10rpx; margin-bottom: 20rpx">座席/包厢数量：{{ shujv.seatItem.length }}</view>
				<view class="flex" style="flex-wrap: wrap">
					<view v-for="(item, index) in shujv.seatItem" :key="index" style="margin-right: 20rpx; margin-bottom: 20rpx">
						<view class="center" style="background: rgba(244, 161, 52, 0.2); border-radius: 20rpx; border: 1px solid #f4a134; padding: 8rpx">
							<text style="font-weight: 400; font-size: 24rpx; color: #f4a134">贵宾区{{ item.no }}</text>
						</view>
					</view>
				</view>
			</view>
			<view class="" style="background: #ffffff; border-radius: 10rpx; padding: 25rpx 30rpx; margin-top: 20rpx">
				<view class="" style="font-weight: 400; font-size: 30rpx; color: #000000">支付明细</view>
				<view class="between" style="margin-top: 30rpx">
					<text style="font-weight: 400; font-size: 30rpx; color: #888888">座席总价小计</text>
					<text style="font-weight: 400; font-size: 30rpx; color: #222222">
						¥{{ shujv.coupon ? Math.round((Number(shujv.money) + Number(JSON.parse(shujv.coupon).money)) * 100) / 100 : shujv.money }}
					</text>
				</view>
				<view class="between" style="margin-top: 30rpx">
					<text style="font-weight: 400; font-size: 30rpx; color: #888888">优惠券</text>
					<text style="font-weight: 400; font-size: 30rpx; color: #222222">{{ shujv.coupon ? JSON.parse(shujv.coupon).money : '暂无' }}</text>
				</view>
				<view class="between" style="margin-top: 30rpx">
					<text style="font-weight: 400; font-size: 30rpx; color: #888888">总计</text>
					<text style="font-weight: 400; font-size: 30rpx; color: #222222">¥{{ shujv.money }}</text>
				</view>
			</view>
			<view class="" style="background: #ffffff; border-radius: 10rpx; padding: 25rpx 30rpx; margin-top: 20rpx">
				<view class="" style="font-weight: 400; font-size: 30rpx; color: #000000">预约信息</view>
				<view class="between" style="margin-top: 30rpx">
					<text style="font-weight: 400; font-size: 30rpx; color: #888888">联系人</text>
					<text style="font-weight: 400; font-size: 30rpx; color: #222222">{{ shujv.name }}</text>
				</view>
				<view class="between" style="margin-top: 30rpx">
					<text style="font-weight: 400; font-size: 30rpx; color: #888888">联系人电话</text>
					<text style="font-weight: 400; font-size: 30rpx; color: #222222">{{ shujv.tel }}</text>
				</view>
			</view>
			<view class="" style="background: #ffffff; border-radius: 10rpx; padding: 25rpx 30rpx; margin-top: 20rpx">
				<view class="" style="font-weight: 400; font-size: 30rpx; color: #000000">订单信息</view>
				<view class="between" style="margin-top: 30rpx">
					<text style="font-weight: 400; font-size: 30rpx; color: #888888">订单编号</text>
					<view class="flex">
						<text style="font-weight: 400; font-size: 30rpx; color: #222222; margin-right: 10rpx">{{ shujv.order_no }}</text>
						<view class="" @click="fu">
							<view class="center" style="width: 90rpx; height: 40rpx; background: #ffffff; border-radius: 20rpx; border: 1px solid #d2d2d2">
								<text style="font-weight: 400; font-size: 26rpx; color: #888888; line-height: 0">复制</text>
							</view>
						</view>
					</view>
				</view>
				<view class="between" style="margin-top: 30rpx">
					<text style="font-weight: 400; font-size: 30rpx; color: #888888">付款时间</text>
					<text style="font-weight: 400; font-size: 30rpx; color: #222222">{{ shujv.create_time }}</text>
				</view>
				<view class="between" style="margin-top: 30rpx">
					<text style="font-weight: 400; font-size: 30rpx; color: #888888">支付方式</text>
					<text style="font-weight: 400; font-size: 30rpx; color: #222222">微信支付</text>
				</view>
				<view class="between" style="margin-top: 30rpx">
					<text style="font-weight: 400; font-size: 30rpx; color: #888888">实付金额</text>
					<text style="font-weight: 400; font-size: 30rpx; color: #222222">{{ shujv.money }}</text>
				</view>
			</view>
		</view>
		<view class="" style="height: 170rpx" v-if="shujv.status == 2"></view>
		<view class="" style="position: fixed; bottom: 0; width: 100%; background: white" v-if="shujv.status == 2">
			<view class="" style="padding: 25rpx">
				<view class="between">
					<view class="" @click="show1 = true">
						<view class="center" style="width: 326rpx; height: 91rpx; border-radius: 45rpx; border: 1px solid #000000">
							<text style="font-weight: 400; font-size: 30rpx; color: #000000">申请退款</text>
						</view>
					</view>
					<view class="center" style="width: 326rpx; height: 91rpx; border-radius: 45rpx; border: 1px solid #8c1608; background: #8c1608" @click="show = true">
						<text style="font-weight: 400; font-size: 30rpx; color: #ffffff">核销二维码</text>
					</view>
				</view>
			</view>
			<view class="" style="height: env(safe-area-inset-bottom)"></view>
		</view>
		<u-popup :show="show" mode="center" :safeAreaInsetBottom="false" round="10rpx" duration="0">
			<view style="width: calc(100vw - 50rpx); position: relative; overflow: hidden;padding-bottom: 50rpx">
				<view class="" style="position: absolute; top: 0;left: 0;width: 100%;height: 100%">
					<image src="/static/beitu.png" mode="" style="width: 100%;height: 100%"></image>
				</view>
				<view class="" style="position: absolute; bottom: -400rpx; right: 0">
					<image src="/static/zhang.png" mode="" style="width: 374rpx; height: 640rpx"></image>
				</view>
				<view class="" style="position: relative">
					<view class="" style="padding: 40rpx">
						<view class="center" style="position: relative">
							<text style="font-weight: 400; font-size: 33rpx; color: #000000">核销二维码</text>
							<view class="" style="position: absolute; right: 0; top: 0" @click="show = false">
								<text style="font-size: 40rpx; color: #bfbfbf">×</text>
							</view>
						</view>
					</view>
					<view class="" style="padding: 0 30rpx">
						<view class="" style="font-weight: 400; font-size: 30rpx; color: #000000">{{shujv.category.title }}</view>
						<view class="flex" style="flex-wrap: wrap;margin-top: 10rpx;">
							<view class="list" v-for="(item, index) in shujv.seatItem" :key="index" style="margin-right: 20rpx; margin-bottom: 20rpx">
								<view class="center li" :class="seatItemId == item.id ? 'active' : ''" @click="seatItemClick(item)">
									<text>贵宾区{{ item.no }}</text>
								</view>
							</view>
						</view>
						<view class="center" style="margin-top: 25rpx" v-if="show">
							<canvas id="qrcode" canvas-id="qrcode" style="width: 400rpx; height: 400rpx">{{ sheng() }}</canvas>
						</view>

						<view class="center" style="height: 70rpx; background: #8c1608; border-radius: 35rpx; margin-top: 40rpx" @click="show = false">
							<text style="font-weight: 400; font-size: 30rpx; color: #ffffff">确定</text>
						</view>
					</view>
				</view>
			</view>
		</u-popup>
		<u-popup :show="show1" mode="center" :safeAreaInsetBottom="false" round="10rpx" duration="0">
			<view style="width: calc(100vw - 50rpx); height: 750rpx; position: relative; overflow: hidden">
				<view class="" style="position: absolute; top: 0">
					<image src="/static/beitu.png" mode="" style="width: calc(100vw - 50rpx); height: 750rpx"></image>
				</view>
				<view class="" style="position: absolute; bottom: -400rpx; right: 0">
					<image src="/static/zhang.png" mode="" style="width: 374rpx; height: 640rpx"></image>
				</view>
				<view class="" style="position: relative">
					<view class="" style="padding: 40rpx">
						<view class="center" style="position: relative">
							<text style="font-weight: 400; font-size: 33rpx; color: #000000">退款提醒</text>
							<view class="" style="position: absolute; right: 0; top: 0" @click="show1 = false">
								<text style="font-size: 40rpx; color: #bfbfbf">×</text>
							</view>
						</view>
					</view>
					<view class="center column">
						<view class="" style="font-weight: 400; font-size: 30rpx; color: #000000">您确定要发起退款吗?</view>
						<view class="" style="color: #888888; font-size: 26rpx">您预计可退¥{{ tmoney }}</view>
					</view>
					<view class="center" style="margin-top: 35rpx">
						<view class="center" style="width: 200rpx; height: 70rpx; background: #f1f1f1; border-radius: 35rpx" @click="show1 = false">
							<view class="" style="font-weight: 400; font-size: 30rpx; color: #000000">取消</view>
						</view>
						<view class="center" style="width: 200rpx; height: 70rpx; background: #8c1608; border-radius: 35rpx; margin-left: 75rpx" @click="qt">
							<view class="" style="font-weight: 400; font-size: 30rpx; color: #ffffff">确定</view>
						</view>
					</view>
					<scroll-view style="height: 25vh;margin-top: 30rpx;" scroll-y>
						<view class="" style="margin-top: 30rpx; padding: 30rpx 60rpx 60rpx 60rpx">
							<u-parse :content="state.xieyi.refund_des"></u-parse>
						</view>
					</scroll-view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
import { feastordergetDetail, feastordergetRefundInfo, feastorderrefund } from '../../untils/api.js';
import UQRCode from '../../uni_modules/Sansnn-uQRCode/js_sdk/uqrcode/uqrcode.js';
export default {
	data() {
		return {
			show: false,
			id: '',
			shujv: {},
			show1: false,
			tmoney: 0,
			seatItemId:''
		};
	},
	onLoad(ops) {
		this.id = ops.id;
		this.qfeastordergetDetail();
		this.qfeastordergetRefundInfo();
	},
	onShow() {},
	methods: {
		async qt() {
			uni.showLoading({
				title: '加载中',
				mask: true
			});

			const data = await feastorderrefund({
				order_id: this.id
			});
			if (data.code == 1) {
				uni.showToast({
					icon: 'none',
					title: '操作成功',
					duration: 2000
				});
				setTimeout(() => {
					uni.navigateBack({
						delta: 1
					});
				}, 1000);
			}
		},
		async qfeastordergetRefundInfo() {
			const data = await feastordergetRefundInfo({
				order_id: this.id
			});
			this.tmoney = data.data.money;
		},
		fu() {
			uni.setClipboardData({
				data: this.shujv.order_no,
				success: function () {
					uni.showToast({
						title: '复制成功',
						icon: 'none'
					});
				},
				fail: function () {
					uni.showToast({
						title: '复制失败',
						icon: 'none'
					});
				}
			});
		},
		async qfeastordergetDetail() {
			const data = await feastordergetDetail({
				order_id: this.id
			});
			this.shujv = data.data;
			this.seatItemId = this.shujv.seatItem[0].id;
		},
		seatItemClick(item){
			uni.showLoading({
			    title:'生成中',
			    mask:true
			})
			this.seatItemId = item.id;
			this.sheng();
		},
		sheng() {
			// 获取uQRCode实例
			var qr = new UQRCode();
			// 设置二维码内容
			qr.data = this.seatItemId;
			// 设置二维码大小，必须与canvas设置的宽高一致
			qr.size = this.rpxToPx(400);
			// 调用制作二维码方法
			qr.make();
			// 获取canvas上下文
			var canvasContext = uni.createCanvasContext('qrcode', this); // 如果是组件，this必须传入
			// 设置uQRCode实例的canvas上下文
			qr.canvasContext = canvasContext;
			// 调用绘制方法将二维码图案绘制到canvas上
			qr.drawCanvas();
			uni.hideLoading();
		},
		rpxToPx(rpx) {
			const screenWidth = uni.getSystemInfoSync().screenWidth; // 获取屏幕宽度
			const baseWidth = 750; // 设计稿的宽度，通常为 750px
			return (rpx * screenWidth) / baseWidth;
		},
		rightClick() {
			console.log('rightClick');
		},
		leftClick() {
			console.log('leftClick');
		},
		scrolltolower() {
			console.log('到底了');
		}
	}
};
</script>

<style lang="scss" scoped>
.sl1 {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	overflow: hidden;
	-webkit-line-clamp: 1;
}
.sl2 {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	overflow: hidden;
	-webkit-line-clamp: 2;
}
.beijing {
	overflow: hidden;
	padding: 0 25rpx;
}
.beijing1 {
	min-height: 100vh;
	background-color: #f0e8dc;
	//系统tabbar不要加注释掉
	padding-bottom: env(safe-area-inset-bottom);
	box-sizing: border-box;
}
	.list{
		.li{
			background: #fff;
			border-radius: 20rpx;
			border: 1px solid #bfbfb;
			padding: 8rpx;
			text{
				font-weight: 400;
				font-size: 24rpx;
				color: #222;
			}
			&.active{
				background: rgba(244, 161, 52, 0.2);
				border: 1px solid #f4a134;
				text{
					color: #f4a134;
				}
			}
		}
	}
</style>
